<template>
	<view class="container">
		<headers title='项目详情'></headers>
		<!-- <view class="img-top"> -->
		<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
			:duration="duration">
			<swiper-item v-for="(item,index) in 3" :key="index">
				<view class="swiper-item uni-bg-red">
					<image src="../../static/img/xp.jpg" mode=""></image>
				</view>
			</swiper-item>

		</swiper>
		<!-- </view> -->
		<view class="c-box">
			<view class="top">
				<view class="titi">关爱空巢旅者</view>
				<view class="box-ti">
					<view class="">
						<image src="../../static/img/gy (7).png" mode=""></image>
					</view>
					<view class="hang">已有 <text class="du"> 999</text> 人贡献了爱心</view>
				</view>
			</view>
			<view class="ztxx">
				{{zi}}
			</view>
		</view>
		<!-- xia -->
		<view class="box-bmt">
			<view class="bmt-top">
				<view class="alv">项目介绍</view>
			</view>
			<view class="zhutinr">
				老龄化研究报告2022》中提出，中国人均GDP接近发达经济体下限，但13.5%的老龄化程度已经超过中高收入经济体10.8%的平均水平，未来将面临经济增长与养老负担双重压力，预计在2032年前后进入老年人口占比超20%的超级老龄化社会。在大多数普通人的眼中，老年生活应该是放松的，舒适的。闲时到公园四处转转，和老友从晒被子的技巧，谈到最近的蔬菜涨了几毛，又从邻里关系讨论到国家政治，悠闲地过着每一天。然而在许多经济欠发达地区，“未富先老”的他们只能囿于昼夜、贫瘠与落后，每年只能依靠土地耕作获得几百元收入度日。在这个寒风乍起的季节，路上的行人都已经穿上厚衣裳抵御寒冷，但在某些偏远地区，一袋饱腹的大米，一次温情的陪伴，一条御寒的毛毯，一次康复理疗的机会......这些看似微小的愿望，在许多人看来轻而易举，却是他们小心翼翼的渴望。​​​​​​​慈明慈善基金会，连续8年冬天为困境老人送去一份“冬日暖阳”，给老人们送去最低生活保障，可以让困境老人可以温暖过冬。
			</view>
		</view>
		<!--  -->
		<view class="" style="width: 100%; height: 120rpx;"></view>
		<view class="di-bmt">
			<view class="d-zuo">
				<view class="z-img">
					<image src="../../static/img/gy (25).png" mode=""></image>
				</view>
				<view class="" style="font-size: 12px;">分享</view>
			</view>
			<view class="anniu">
				<view class="">我要捐款</view>
			</view>
		</view>
	</view>
</template>

<script>
	import headers from '../../components/headers/headers.vue'
	export default {
		data() {
			return {
				zi: "划为全国多个地区近千位困境老人送去生活物资的同时，点对点一对一精准帮扶困境老人，通过心愿清单的的形式为他们送去“生活必需品”，帮助他们解决生活中的困难，度过一个温暖的冬季。",
				indicatorDots: false,
				autoplay: true,
				interval: 2000,
				duration: 500,
			}
		},
		components: {
			headers
		},
		methods: {
			changeIndicatorDots(e) {
				this.indicatorDots = !this.indicatorDots
			},
			changeAutoplay(e) {
				this.autoplay = !this.autoplay
			},
			intervalChange(e) {
				this.interval = e.target.value
			},
			durationChange(e) {
				this.duration = e.target.value
			}
		}


	}
</script>
<style scoped lang="scss">
	.uni-margin-wrap {
		width: 100%;
		width: 100%;
	}

	.swiper {
		height: 470rpx;
	}

	.swiper-item {
		display: block;
		height: 470rpx;
		text-align: center;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.swiper-list {
		margin-top: 40rpx;
		margin-bottom: 0;
	}

	.uni-common-mt {
		margin-top: 60rpx;
		position: relative;
	}

	.info {
		position: absolute;
		right: 20rpx;
	}

	.uni-padding-wrap {
		width: 550rpx;
		padding: 0 100rpx;
	}

	.content {
		// display: flex;
		// flex-direction: column;
		// align-items: center;
		// justify-content: center;
		background: #F3F3F3;
		// height: calc(100vh);
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.container {
		width: 100%;
		background: #F3F3F3;
	}

	.img-top {
		width: 100%;
		height: 470rpx;
		overflow: hidden;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.c-box {
		box-sizing: border-box;
		background: white;
		padding: 30rpx 20rpx;
	}

	.titi {
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
	}

	.box-ti {
		margin: 16rpx 0px;
		display: flex;

		image {
			width: 28px;
			height: 28px;
			margin-right: 10rpx;
		}

		.hang {
			font-size: 24rpx;
			color: #999999;
		}

		.du {
			color: #0DC06E;
			font-size: 24rpx;
		}
	}

	.top {

		border-bottom: 2rpx solid #EEEEEE;
	}

	.ztxx {
		margin-top: 20rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #666666;
		line-height: 50rpx;
	}

	.box-bmt {

		width: 100%;
		margin-top: 20rpx;
		background-color: white;
		box-sizing: border-box;
		padding: 30rpx 20rpx;
	}

	.bmt-top {
		font-size: 32rpx;
		font-weight: 600;
		color: #0DC06E;
		line-height: 32rpx;
		border-bottom: 1px solid #EEEEEE;
	}

	.alv {
		width: 128rpx;
		font-size: 32rpx;
		padding-bottom: 20rpx;
		border-bottom: 4px solid #0DC06E;
	}

	.zhutinr {
		font-size: 28rpx;
		font-weight: 400;
		color: #666666;
		line-height: 50rpx;
	}

	.di-bmt {
		width: 100%;
		height: 130rpx;
		background: white;
		position: fixed;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 0rpx 40rpx;
	}

	.d-zuo {
		width: 30%;
		text-align: center;
		font-size: 24rpx;
		font-weight: 400;
		color: #333333;
	}

	.z-img {
		margin: 0 auto;
		width: 40rpx;
		height: 40rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.anniu {
		width: 70%;
		height: 80rpx;
		background: linear-gradient(90deg, #0DC06E 0%, #0DB5C0 100%);
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		font-weight: 400;
		color: #FFFFFF;
	}
</style>